<html>
<head>
    <meta charset="utf-8">
    <script src="../js/jquery.min.js"></script>
</head>
<body>
    <div>
        <h3>用户注册</h3>
        <div>
            <label>手机号</label>
            <div>
                <input type="text" placeholder="手机号" name="telphone" id="telphone"/>
            </div>
        </div>
        <div>
            <label>验证码</label>
            <div>
                <input type="text" placeholder="验证码" name="otpCode" id="otpCode"/>
            </div>
        </div>
        <div>
            <label>用户昵称</label>
            <div>
                <input type="text" placeholder="用户昵称" name="name" id="name"/>
            </div>
        </div>
        <div>
            <label>性别</label>
            <div>
                <input type="text" placeholder="性别" name="gender" id="gender"/>
            </div>
        </div>
        <div>
            <label>年龄</label>
            <div>
                <input type="text" placeholder="年龄" name="age" id="age"/>
            </div>
        </div>
        <div>
            <label>密码</label>
            <div>
                <input type="password" placeholder="密码" name="password" id="password"/>
            </div>
        </div>
    </div>
    <div>
        <button id="register" type="submit">
           注册
        </button>
        <button id="login" type="submit">
            登陆
        </button>
    </div>
</body>
<script>
    jQuery(document).ready(function () {
        $("#login").on("click",function () {//
            window.location.href = "login.html";
        });

        $("#register").on("click",function () {//
            var telphone = $("#telphone").val();
             var otpCode = $("#otpCode").val();
             var name = $("#name").val();
             var gender = $("#gender").val();
             var age = $("#age").val();
             var password = $("#password").val();
             if(telphone == null || telphone == ""){
             alert("手机号不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
             if(otpCode == null || otpCode == ""){
             alert("验证码不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
             if(name == null || name == ""){
             alert("用户昵称不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
             if(gender == null || gender == ""){
             alert("性别不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
             if(age == null || age == ""){
             alert("年龄不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
             if(password == null || password == ""){
             alert("密码不能为空");
             return false;//防止js的冒泡事件传递机制，会冒泡到上一层。即form post处理流里，此时returnfalse把冒泡事件捕获住，不让他传递给上一层。
             }
            $.ajax({
                type:"POST",
                contentType:"application/x-www-form-urlencoded",
                url:"http://localhost:8090/user/register",
                data:{
                    "telphone":telphone,
                    "otpCode":otpCode,
                    "name":name,
                    "gender":gender,
                    "age":age,
                    "password":password

                },
                xhrFields:{withCredentials:true},
                success:function (data) {
                    if(data.status == "success"){
                        alert("注册用户成功！");
                        window.location.href = "listItem.html";
                    }else{
                        alert("注册用户失败，原因："+data.data.errMsg);
                    }
                },
                error:function (data) {
                    alert("注册用户失败，原因："+data.responseText);
                }
            });
            return false;
        });
    });
</script>
</html>